<template>
  <div class="wrapper border-box">
    <!-- 分类导航 -->
    <div class="wrapperNav  border-box flex ju-ce ai-ce">
      <div class="backIcon border-box pointer">
        <svg class="icon" aria-hidden="true" fill="#fff">
          <use class="" xlink:href="#icon-zhuye" ></use>
        </svg>
      </div>
      <div v-for="(item,index) in wrapperNavList" :key="index" class="flex-1 pointer">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="`#icon-${item.iconName}`"></use>
        </svg>
        <span>
          {{item.typeCName}}
        </span>
      </div>
      <!-- 主页 硬件 个人日常 个人项目 收集 实验室 友猿 -->
    </div>
    <!-- 时间线留言板区 -->
    <div class="wrapperTalk">
      留言板
    </div>
  </div>
</template>

<script>
// import { defineComponent } from '@vue/composition-api'

export default{
  
  data(){
    return{
      // 默认分类
      wrapperNavList:[
        {
          typeId:"yj",
          iconName:"xianqia",
          typeCName:"硬件杂谈",
        },
        {
          typeId:"rc",
          iconName:"canyin",
          typeCName:"个人日常",
        },
        {
          typeId:"yx",
          iconName:"youxishoubing",
          typeCName:"游戏爱好",
        },
        {
          typeId:"grxm",
          iconName:"xiangmu1",
          typeCName:"个人项目",
        },
        {
          typeId:"sys",
          iconName:"shiyanshijiankongjiankong",
          typeCName:"功能实验",
        },
        {
          typeId:"yy",
          iconName:"dilanxianxingiconyihuifu_huabanfuben",
          typeCName:"友猿",
        },
      ]
    }
  },
  setup() {
    
  },
}
</script>


<style lang="scss" scoped>
.wrapper{
  width: 72%;
  height: 100%;
  // background-color: #fff;
  padding: 0 10px;
  .wrapperNav{
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    height: 90px;
    font-size: 18px;
    background-color: #fff;
    .backIcon{
      display: flex;
      padding: 10px;
      // height: 100%;
      border-right: 1px solid #e6e6e6;
      .icon{
        width: 46px;
        height: 46px;
        padding: 6px;
        color: #fff;
        background: #ff5c7c;
        border-radius: 46px;
      }
    }
    .icon{
      font-size: 36px;
    }
  }
}
</style>